.settings {
    padding: 0 15px 10px 15px;
}

.container {
    display: table;
    width: 100%;

    // https://www.w3.org/TR/CSS21/visudet.html#min-max-heights
    // In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
    height: 400px;

    &.border {
        border: 1px solid #ccc;
    }
}

.row {
    display: table-row;
}

.col {
    display: table-cell;
}

.navbar {
    position: relative;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;

    > li {
        position: relative;
        display: block;

        > a {
            position: relative;
            display: block;
            padding: 5px 10px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #e0e0e0;
            color: #000;
            text-decoration: none;
            white-space: nowrap;
        }
        > a:focus,
        > a:hover {
            color: #cc0000;
        }
    }
    > li.active {
        > a,
        > a:focus,
        > a:hover {
            color: #fff;
            background-color: #999;
        }
    }
}

//
// Left Pane
//
.sidenav {
    width: 200px;
    background-color: #f5f5f5;
}

//
// Splitter
//
.splitter {
    width: (5 + 2)px;
    min-width: (5 + 2)px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

//
// Right Pane
//
.section {
    vertical-align: top;
    position: relative;

    .heading {
        color: #fff;
        background-color: #999;
        padding: 5px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .content {
        padding: 15px;
    }
}
